<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <script src="https://unpkg.com/three/build/three.js"></script>
        <script>
            // 创建一个场景
            const scene = new THREE.Scene();
            scene.background = new THREE.Color(0xffffff);
            // 创建一个相机
            const camera = new THREE.PerspectiveCamera(
                45,
                innerWidth / innerHeight,
                1,
                1000
            );
            // 设置相机的位置
            camera.position.set(0, 0, 50);
            // 创建一个渲染器
            const renderer = new THREE.WebGLRenderer({
                antialias: true,
            });
            //设置渲染尺寸
            renderer.setSize(innerWidth, innerHeight);

            document.body.append(renderer.domElement);

            const max = 722;
            for (let i = 0; i < max; i++) {
                const group = new THREE.Group();

                const heartShape = new THREE.Shape();
                heartShape.moveTo(-3, -3);
                heartShape.lineTo(-3, 3);
                heartShape.lineTo(3, 3);
                heartShape.lineTo(3, -3);

                const geometry = new THREE.ShapeGeometry(heartShape);

                const material = new THREE.MeshBasicMaterial({
                    color: `hsl(${(360 / max) * i}, 100%, 50%)`,
                });

                var plane = new THREE.Line(
                    geometry,
                    material,
                    THREE.LinePieces
                );

                plane.position.x = 15;
                plane.rotation.z = -i / 20;
                group.rotation.y = ((360 / max) * i * Math.PI) / 180;

                group.add(plane);
                scene.add(group);
            }
            let rotateSpeed = 0.001;
            scene.rotation.x = Math.PI / 7;
            const animation = () => {
                requestAnimationFrame(animation);
                scene.rotation.y -= rotateSpeed;
                renderer.render(scene, camera);
            };
            animation();
            renderer.setPixelRatio(devicePixelRatio)

            let middle = innerWidth / 2;
            window.onresize = function () {
                renderer.setSize(window.innerWidth, window.innerHeight);
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                middle = innerWidth / 2;
            };

            document.addEventListener("mousemove", (e) => {
                let direction = 1;
                rotateSpeed = -(e.clientX - middle) * 0.00002;
            });
        </script>
    </body>
</html>
